<%-- 
    Document   : Employee
    Created on : May 9, 2012, 9:28:43 AM
    Author     : Thanh Luan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>

<html>
    <head>

        <link rel="stylesheet" type="text/css" href="../css/paging.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <!-- -->
        <link rel="stylesheet" type="text/css" href="../scripts/tabs/slidingtabs-horizontal.css">
        <script type="text/javascript" src="../scripts/tabs/slidetab.js"></script>
        <!-- -->
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.rateit.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/easypaginate.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/rateit.css">


        <script type="text/javascript" language="javascript">
            var abc  =false;
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                initThickBox('.thickbox');
          
                $j('.st_horizontal').slideTabs();
               
                Tab4Kapi();
                //searchClient();
                $j('.text_search').live('keyup',function(){
                    if($j('.text_search').val() == ""){
                        $j('.item').show();
                        $j('.close').trigger('click');   
                                   
                    }else{
                        $j('.close').trigger('click');   
                        $j('.item').hide();
                        $j('.item').each(function(){
                            html = $j(this).html();                            
                            if(ununicode(html).indexOf(ununicode($j('.text_search').val())) > -1)  {                                
                                $j(this).show();
                            }else{
                                $j(this).hide();
                            }
                        });
                    }

                });
                $j('.search_box').hide();       
                $j('.sidebar_search').live('click',function(){
                    $j('.search_box').hide();
                    if($j(this).next().hasClass('active')){

                        $j('.search_box').removeClass('active');
                    }else{

                        $j('.search_box').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().show();
                    }
                });
                $j(".content_right").live("click",function(){
                    $j('.search_box').hide();
                });
                //                $j(".choise_groups").live("mouseover",function(){
                //                    pn100 = $j(this).attr("lang");
                //                   
                //                    $j.post("listGroupDepartment.jsp?pn100="+pn100,function(data){
                //                        if(data!=null) {
                //                            $j(".group_list_cus").html(data);
                //                                                       
                //                        }
                //                    });  
                //                });
             

                

                $j('.fancyLinks').fancybox({               
                    closeBtn:false, 
                    helpers : {
                        overlay : {
                            closeClick : false,
                            css : {
                                'cursor':'default'
                            }
                        }
                    }
                });

                $j(".department1").live("click",function(){ 
                    
                    
                    
                    fn450 = $j(this).attr("lang");
                    $j.post("N450_N850.jsp?&action=group&fh200=99&fn450="+fn450 +"&fn850=0",function(data){
                        if(data!=null){ 
                            window.location.href="employee.jsp?&action=reload&department1&fh200=99&fn450="+fn450 +"&fn850=0";
                        }
                           
                    });  
                });
                $j(".department2").live("click",function(){
                   
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                   
                    window.location.href="employee.jsp?actionn=reload&fn450="+0 +"&fn850="+fn850;
                    
                });
                
                $j(".department3").live("click",function(){
                     
                    
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                  
                    window.location.href="employee.jsp?actionn=reload&fn450="+0 +"&fn850="+fn850;
                   
                });
                
                // Begin Event load ajax form CRM
                   
                $j('.contactN950').live('click',function(){
                    object = $j(this).next();                                              
                    var pn100KH = $j('#form-input-customer\\:pn100').val();                     
                       
                       
                    $j.post("contactCRM.jsp?action=editajaxpage&pn100="+ pn100KH+"&table=N100", function(data){
                        $j('.customer-boxcontact').html(data);
                    });
                         
                        
                    
                });
                $j('.acountT025').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();      
                    $j.post("accountCRM.jsp?action=editajaxpage&pn100="+pn100KH+"&tv026=N100",function(data){
                        $j('.customer-boxacount').html(data);
                    }) ;
                    
                });
                $j('.infoL200').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();
                    
                    $j.post("l200EMP.jsp?action=editajaxpage&pn100="+pn100KH,function(data){
                        $j('.customer-boxL200').html(data);
                    }) ;
                    
                });
                
                   
                $j('.infoN350').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();   
                    $j.post("passportCRM.jsp?action=editajaxpage&pn100="+ pn100KH, function(data){
                        $j('.customer-boxN350').html(data);
                    });
                    
                });
                    
                    
                // End Event load ajax form CRM for Dashbord
                //save column N900
                $j(".updateN900").live("click",function(){
                    pn100 = $j(this).parent(".group_list_cus").attr('lang');
                    fn850 = $j(this).attr('lang');
                    nv902 = $j(this).text();
                    showPleaseWait();
                    $j(this).parents().parents().parents().parents().parents().parent('.item').find('.nv852').text(nv902);
                    
                    $j.post('n900Begin.jsp?action=updateColumN900&pn100='+pn100+'&fn850='+fn850+'&nv902='+nv902,function(data){
                        if(data != null){
                            hidePleaseWait();
                        }
                    });
                    
                });


                $j('.webcame').live('click',function(e){
                    
                    pn100  =$j(this).attr('lang');
                    $j('.scapture').css('visibility','visible');
                    $j('.scapture').css('margin-top',e.pageY-400);
                    $j('.scapture').css('margin-left',e.pageX-630);
                    $j.post('webcame.jsp?pn100='+pn100,function(data){
                        $j('.scapture').html(data);
                    });
                });
                $j( ".sendSMS_person" ).click(function() {
                    $j( "#togglesms" ).show();
                    $j( "#togglesms" ).animate({height:'auto',opacity:'0.9'},"slow");
                    $j( "#togglesms" ).animate({width:'39%',opacity:'0.9'},"slow");
                    var info = $j(this).attr('lang');
                    $j.post("SgtSMS.jsp?"+info,function(data){
                        if(data!=null){
                            $j( "#togglesms" ).html(data);
                        }
                    });
                });
                  $j('.check_select').live('click',function(){
                        //    $j(".abc").trigger("click");
                        $j( "#toggle" ).hide();
                        var lang= $j(this).attr("lang");
                        var boool;
                        if( $j(this).is(":checked"))
                        {
                            boool = true;
                        }
                        else
                        {
                            boool = false;
                        }
                            
                        $j.post("employee.jsp?action=addCusp100&p100="+lang+"&valueC="+boool,function(data){
                            
                        });
                    });
                    
                    $j(".checkAll").live("click",function(){                  
                        flag = $j('.checkAll').is(':checked');                
                        $j(".check_select").each(function(){
                            $j('.check_select')  .attr('checked', flag);
                        });                 
                        var boool;
                        if( $j(this).is(":checked"))
                        {
                            boool = true;
                        }
                        else
                        {
                            boool = false;
                        }                  
                        $j.post("employee.jsp?action=addAllCusp100&boool="+boool,function(data){                          
                        });

                    });
               
            });
        </script>

    </head>


    <body>
        <div id="togglesms">

        </div>
        <a4j:form>

            <h:commandButton rendered="#{loginSession.right.EMP_LST_EXC}" actionListener="#{EmpBean.exportExcel()}"  
                             onclick="showPleaseWait();"                                   
                             styleClass="buttonExcel" >                

            </h:commandButton>
        </a4j:form>
        <a4j:form>
            <div class="fast_search">
                <h:inputText value="#{EmpBean.keySearch}" onfocus="if(this.value=='#{EmpBean.keySearch}')this.value='';" styleClass="text_search"/>
                <div  style="margin-left:5px; float:left" class="buttonsearch">
                    <div class="group cssgroup" >
                        <h:selectOneRadio layout="pageDirection" value="#{EmpBean.typeSearch}" styleClass="feild_sex"  style="margin-left:5px; margin-top:14px; padding:15px; width:195px; height:154px;"   >
                            <f:selectItem itemValue="0" itemLabel="Tất cả"/>
                            <f:selectItem itemValue="1" itemLabel="Ðiện thoại"/>
                            <f:selectItem itemValue="2" itemLabel="Họ tên"/>
                            <f:selectItem itemValue="3" itemLabel="CMND/Passport"/>
                            <f:selectItem itemValue="4" itemLabel="Email"/>
                            <f:selectItem itemValue="5" itemLabel="MSNV"/>
                        </h:selectOneRadio>
                        <h:commandButton action="#{EmpBean.reload}" value="#{locale.search}" style="margin-left:75px; margin-top:5px;" styleClass="buttonsearch2">
                        </h:commandButton>
                    </div>
                </div>                  
            </div>


            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_EMP_VIEW}'></div>" escape="false"/>
            <div id="content">
                <div id="menu_top">
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span>Khu vực</span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>

                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <h:panelGroup rendered="#{loginSession.right.DAB_LST_PAR}">
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#">
                                    <span class="department2" lang="<h:outputText value="#{n450_n850.fn850}"/>">
                                        <h:outputText rendered="#{n450_n850.fn850 !=0}" value="#{n450_n850.nv851}"/>
                                        <h:outputText rendered="#{n450_n850.fn850 ==0}" value="Tất cả"/>
                                    </span>
                                </a>

                            </div>
                            <div class="select_hidden departmentlistN850">

                                <ul>
                                    <li><a href="#"><span class="department3" lang="<h:outputText value="0"/>">
                                                <h:outputText value="Tất cả"/>
                                            </span></a></li>                          


                                    <a4j:repeat value="#{n450_n850.listComb850}" var="item">
                                        <li><a href="#"><span class="department2" lang="<h:outputText value="#{item.value}"/>">
                                                    <h:outputText value="#{item.label}"/>
                                                </span></a></li> 
                                            </a4j:repeat>
                                </ul>
                            </div>
                        </div>
                    </h:panelGroup>
                </div>

                <div id="content_detail">

                    <!-- start sidebar sidebar_row1--->
                    <div class="sidebar_row1">
                        <div class="sidebar" style="width: 100% !important;">
                            <%--   <h:commandLink styleClass="add_new" action="#{processBean.processAddEmployee}"><span><h:outputText value="#{locale.addEmployee}"/></span></h:commandLink> --%>

                            <h:outputLink  rendered="#{loginSession.right.EMP_LST_CRE}" value="editfromemployee.jsp?action=addEmp&height=282px&width=345px" styleClass="fancybox" id="fancybox">
                                <span> <h:graphicImage title="#{locale.addEmployee}" style="float:left;" value="../images/spTour.png"/>  </span>
                            </h:outputLink>



                        </div>
                    </div>
                    <!-- end sidebar row1--->
                    <!-- start sidebar row2--->

                    <div class="sidebar_row2">
                        <h:panelGroup rendered="#{loginSession.right.EMP_LST_SER}">
                            <div class="sidebar">
                                <div class="sidebar_search">

                                </div>
                                <div class="search_box" style="display:none;">

                                    <h3><h:outputText value="#{locale.search}"/></h3>
                                    <div class="fields_input">
                                        <input name="" type="text"  value="<h:outputText value="#{locale.search_key}"/>..." onblur="if(this.value=='')this.value='<h:outputText value="#{locale.search_key}"/>...';" onfocus="if(this.value=='<h:outputText value="#{locale.search_key}"/>...')this.value='';" />
                                        <input name="" type="submit" value="OK" />
                                    </div>
                                    <%--   <h4><h:outputText value="Tìm theo phòng ban"/></h4>
                                       <div class="fields_select">
                                           <a4j:region>
                                               <h:selectOneMenu value="#{EmpBean.fn450}" id="groupfn450" styleClass="select_cus"   >

                                                <f:selectItems value="#{EmpBean.groupN450}" />
                                                <a4j:support event="onchange" actionListener="#{EmpBean.changeGroupN450}" reRender="reloadn100, groupfn850" onsubmit="showPleaseWait();" oncomplete="hidePleaseWait();" />
                                            </h:selectOneMenu>
                                        </a4j:region>
                                    </div> --%>   
                                    <h4><h:outputText value="Tìm theo nhóm tổ"/></h4>
                                    <div class="fields_select">
                                        <a4j:region>
                                            <h:selectOneMenu value="#{EmpBean.fn850}" id="groupfn850" styleClass="select_cus"   >

                                                <f:selectItems value="#{EmpBean.groupN850}" />
                                                <a4j:support event="onchange" actionListener="#{EmpBean.changeGroupN850}" reRender="reloadn100" onsubmit="showPleaseWait();" oncomplete="hidePleaseWait();" />
                                            </h:selectOneMenu>
                                        </a4j:region>
                                    </div>
                                    <h4><h:outputText value="Tìm theo nhóm cá nhân"/></h4>
                                    <div class="fields_select">
                                        <a4j:region>
                                            <h:selectOneMenu value="#{EmpBean.fk400}" id="groupfk400" styleClass="select_cus"   >

                                                <f:selectItems value="#{EmpBean.groupOther}" />
                                                <a4j:support event="onchange"  actionListener="#{EmpBean.changeGroupOther}" reRender="reloadn100, reload5,btnSubmit22" onsubmit="showPleaseWait();" oncomplete="hidePleaseWait();"/>
                                            </h:selectOneMenu>
                                        </a4j:region>
                                    </div>
                                    <%--  <div class="fields_submit">
                                          <input name="" type="submit" value="<h:outputText value="#{locale.search_option}"/>" />
                                      </div> --%>
                                    <h3 style="float:left; margin-top:15px"><h:outputText value="#{locale.add_new_group}:"/></h3>
                                    <div class="fields_input" style="border-bottom:none;">
                                        <h:inputText styleClass="groupname" value="#{k400Controller.KV401}" style="width:188px;" onblur="if(this.value=='')this.value='#{k400Controller.KV401}';" onfocus="if(this.value=='#{k400Controller.KV401}')this.value='';"  />
                                    </div>
                                    <div class="fields_submit">
                                        <h:panelGroup id="btnSubmit22">
                                            <h:commandButton   onclick="if( $j('.groupname').val()=='' || $j('.groupname').val()=='Nhập tên nhóm') return false; else return true;"  action="#{k400Controller.saveK400forN100E}" value="Thêm nhóm" styleClass="buttonsave">

                                            </h:commandButton>
                                            <h:outputLink style="color:#fff;"   value="sendMoreSMS.jsp?page=employee&pk400=#{EmpBean.fk400}&height=453&amp;width=741&amp;modal=true" styleClass="fancybox buttonsaveS" id="thickbox333"  ><h:outputText value="Gửi SMS"/></h:outputLink>
                                        </h:panelGroup>                                        
                                    </div>
                                </div>
                            </div>
                        </h:panelGroup>
                    </div>

                    <!-- end sidebar row2--->
                    <div class="fillter">
                        <div class="dropdown">
                            <h:panelGroup id="reload5">
                                <h:panelGroup  rendered="#{EmpBean.fk400 > 0}" >
                                    <div class="select_choise ">

                                        <a href="#"><span><h:outputText value="Action"/></span></a>


                                    </div>
                                    <div class="select_hidden">
                                        <ul>

                                            <li>
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="addgroupcustomer.jsp?action=loadGroup&page=employee.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=453&amp;width=941&amp;modal=true" styleClass="thickbox add_new" id="thickbox2"  >
                                                    <span> <h:outputText value="#{locale.add_group}"/></span>
                                                </h:outputLink>
                                            </li>
                                            <li >
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="removegroupcustomer.jsp?action=loadGroup&page=employee.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=425&amp;width=952&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  >
                                                    <span> <h:outputText value="#{locale.delete_group}"/></span>
                                                </h:outputLink>

                                            </li>


                                        </ul>
                                    </div>
                                </h:panelGroup>
                            </h:panelGroup>
                        </div>
                    </div>

                    <div class="content_right">
                        <div class="content" id="">
                            <div class="title">
                                <%--<h2><h:outputText value="#{locale.listEmployee}"/></h2>--%>

                                <div class="sort">
                                    <div class="deletepage">
                                        <h:outputLink rendered="#{loginSession.right.EMP_LST_DLE}" value="employeeDelete.jsp">
                                            <img style="float: left; margin-left:0px;" src="../images/book_delete.png" title="Danh sách nhiên viên đã nghỉ"/>
                                        </h:outputLink>
                                    </div>
                                    <div class="sort_char">

                                        <jsp:include page="../../common/search.jsp"/>

                                    </div>
                                    <div class="moreMail">
                                        <div class="classimageSMS">
                                            <h:selectBooleanCheckbox styleClass="checkAll" style="float:left;height:22px;margin-left:2px;" value=""/>
                                            </div>
                                        <h:outputLink  rendered="#{loginSession.right.EMP_LST_MAL}" value="popUpSendEmail.jsp?page=employee&step=9&fk100reload=0&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new abc" id="thickbox15"  >
                                            <img style="float: left;margin-right: 5px;margin-left: 5px;" title="Gửi mail nhân viên" src="../images/icon_email1.png"/>
                                        </h:outputLink>
                                            
                                        <div class="classimageSMS">
                                            <img src="../images/viewSMS.png" class="sendSMS_person" lang="page=sendSMSitemEmployee" title="Xác nhận  SMS"/>
                                        </div>
  

                                    </div>
                                </div>
                            </div>
                            <!-- Strart list Content -->

                            <div class="list_content" style="margin-top: 0px;" >
                                <div class="scapture"></div>
                                <h:panelGroup id="reloadn100" >
                                    <h:inputHidden value="#{EmpBean.pn100}" id="pn100"/>
                                    <a4j:repeat  value="#{EmpBean.allListN100}" var="item" rowKeyVar="row" >
                                        <div class="item" id="<h:outputText value="#{item.pn100}"/>">
                                            <%--stt --%>
                                            <div class="fields_id">
                                               
                                                <h:outputText style="float:left;" value="#{row+EmpBean.offset+1}" >
                                                    <f:convertNumber  pattern="##000"></f:convertNumber>
                                                </h:outputText>
                                                <h:selectBooleanCheckbox styleClass="check_select" lang="#{item.pn100}" style="float:left;margin-left:3px !important;" value=""/>
                                            </div>
                                            <%-- logo--%>
                                            <div class="fields_avatar">

                                                <h:outputLink  value="logo.jsp?pn100=#{item.pn100}&page=logo3&type=ALL&height=165px&width=410px&KeepThis=true&amp;TB_iframe=true&amp;modal=true" styleClass="thickbox" id="logo">
                                                    <h:graphicImage value="/DisplayImageServlet?pn100Id=#{item.pn100}&pn100=N100" alt=""   >

                                                    </h:graphicImage>
                                                    <%--    <h:graphicImage value="#{item.nv125}" alt=""  rendered="#{item.nv125!=null}" >

                                                    </h:graphicImage>--%>

                                                </h:outputLink>

                                            </div>
                                            <%--update chuc vu --%>
                                            <div class="fields_info">
                                                <h2><a><h:outputText value="#{item.hoten} "/></a></h2>
                                                <h3><h:outputText value="#{item.nv251}"/><h:outputLink   rendered="#{loginSession.right.EMP_LST_UCV}"  value="editdivisionEm.jsp?action=updatechucvu&pn100N250=#{item.pn100}&height=320px&width=500px" styleClass="fancybox">
                                                        <img src="../images/updatedivision.png" alt="edit" title="edit"/>
                                                    </h:outputLink></h3>
                                                <h3><a><h:outputText rendered="#{item.nv115=='F'}" value="Nữ"/><h:outputText rendered="#{item.nv115=='M'}" value="Nam"/> </a> |<a > <h:outputText value="#{item.nv852}" styleClass="nv852 "/></a></h3>
                                            </div>
                                            <%--phone email --%>
                                            <div class="fields_contact_emp">

                                                <h2><h:outputText value="Phone:" style="float: left;width:45px;"/>
                                                    <h:outputText value="#{item.nv121}" styleClass="sendSMS_person" lang="page=sendSMSitemEmployee&group=1&hoten=#{item.hoten}&phone=#{item.nv121}&fn100=#{item.pn100}"/>

                                                    <%--  <h:outputLink lang="emp" value="sendSMS.jsp?action=sendSMS&page=employee.jsp&pk400=#{EmpBean.fk400}&redirect=emp&hoten=#{item.hoten}&pn100=#{item.pn100}&phone=#{item.nv121}" styleClass="fancybox ">
                                                          <h:outputText value="#{item.nv121}" /> 
                                                      </h:outputLink> --%>
                                                    <a><img src="../images/icon1.png" alt="" /></a> <a href="#"><img src="../images/icon2.png" alt="" /></a></h2>
                                                <h3><h:outputText value="Email:" style="float: left;width:45px;"/><h:outputLink value="popupSendMailPerson.jsp?page=employee&idx=#{item.pn100}&mailx=#{item.nv105}&typex=employee&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  ><h:outputText value="#{item.nv105}" /></h:outputLink></h3>
                                                </div>

                                                <div style="float:left;margin-top: 25px;width:196px;">
                                                    <h2 style="width: 157px;float: left;margin-bottom: 5px;">
                                                    <h:outputText value="Ngày sinh:" style="float: left;width:80px;"/>

                                                    <a>   <h:outputText value="#{item.nd128}" ><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText> </a>


                                                    </h2>
                                                    <h3 style="width: 216px;float: left;">
                                                    <h:outputText value="Ngày bắt đầu:" style="float: left;width:80px;"/>

                                                    <a> <h:outputText value="#{item.ld201}" ><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText> </a>


                                                    </h3>
                                                </div>

                                            <%--phong ban --%>
                                            <div class="edit_more edit_moreemp">
                                                <div class="fields_more detail_more" lang="<h:outputText value="#{item.pn100}"/>">
                                                    <div class="webcame" lang="<h:outputText value="#{item.pn100}"/>">

                                                    </div>

                                                    <h:panelGroup rendered="#{loginSession.right.EMP_LST_UPB}">
                                                        <div class="select_group">
                                                            <div class="choise_groups" lang="<h:outputText value="#{item.pn100}"/>"></div>
                                                            <div class="choise_groups_hiden">
                                                                <div class="group_header"><h:outputText value="phòng ban"/></div>
                                                                <div class="group_list_cus" lang="<h:outputText value='#{item.pn100}'/>">
                                                                    <a4j:repeat value="#{loginCon.listN850}" var="n850">
                                                                        <h:outputText value="#{n850.label}" styleClass="updateN900" lang="#{n850.val}"/>  
                                                                    </a4j:repeat>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </h:panelGroup>
                                                    <div class="dropdown " style="float:left;">
                                                        <div class="select_choise" style="float:left;">
                                                            <a href="#"><span style></span></a>
                                                        </div>
                                                        <div class="select_hidden" style=" top:64px !important;margin-left: 484px !important;">
                                                            <ul>
                                                                <h:panelGroup rendered="#{loginSession.right.EMP_CON_VIEW}">  <li><a lang="tab1<h:outputText value="#{item.pn100}"/>" class="menu-context" href="#<h:outputText value="#{item.pn100}"/>"><span><h:outputText value="#{locale.contact_info}"/></span></a></li></h:panelGroup>
                                                                <h:panelGroup rendered="#{loginSession.right.EMP_INF_VIEW}"><li><a lang="tab2<h:outputText value="#{item.pn100}"/>" class="menu-context" href="#<h:outputText value="#{item.pn100}"/>"><span><h:outputText value="#{locale.job_info}"/></span></a></li></h:panelGroup>
                                                                <h:panelGroup rendered="#{loginSession.right.EMP_CMND_VIEW}"><li><a lang="tab3<h:outputText value="#{item.pn100}"/>" class="menu-context" href="#<h:outputText value="#{item.pn100}"/>"><span><h:outputText value="#{locale.person_info}"/></span></a></li></h:panelGroup>
                                                                <h:panelGroup rendered="#{loginSession.right.EMP_DOC_VIEW}"><li><a lang="tab4<h:outputText value="#{item.pn100}"/>" class="menu-context" href="#<h:outputText value="#{item.pn100}"/>"><span><h:outputText value="#{locale.document}"/></span></a></li></h:panelGroup>
                                                                <h:panelGroup rendered="#{loginSession.right.EMP_ACC_VIEW}"><li><a lang="tab5<h:outputText value="#{item.pn100}"/>" class="menu-context" href="#<h:outputText value="#{item.pn100}"/>"><span><h:outputText value="#{locale.acount_info}"/></span></a></li></h:panelGroup>
                                                                <li><a class="menu-context close" href="#"><span><h:outputText value="#{locale.close}"/></span></a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fields_edit">

                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_ETC}"  value="convertEmptoCus.jsp?id=#{item.pn100}&flag=N100Delete&width=300&height=150" styleClass="fancybox">
                                                        <img src="../images/convert.gif" alt="" title="Xóa nhân viên"/>
                                                    </h:outputLink>
                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_CHD}"  value="contract.jsp?action=employeeHD&pn100=#{item.pn100}" >
                                                        <img src="../images/laodong.png" alt="edit" title="Hợp đồng"/>
                                                    </h:outputLink>
                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_MOD}"  value="editfromemployee.jsp?action=editEmp&pn100A=#{item.pn100}&height=320px&width=500px" styleClass="fancybox">
                                                        <img src="../images/edit.png" alt="edit" title="edit"/>
                                                    </h:outputLink>
                                                   <!-- <a onclick="qbShowdialog(<h:outputText value="#{item.pn100}"/>);">  <img src="../images/icon4.png" alt="delete"  title="delete" /></a> -->

                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_DEL}"  value="delete.jsp?id=#{item.pn100}&flag=N100&width=300&height=150" styleClass="fancybox">
                                                        <img src="../images/delete_1.png" alt="delete"  title="delete" />
                                                    </h:outputLink>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="tabs_menu">
                                            <div id="st_horizontal" class="st_horizontal">
                                                <div class="st_tabs_container st_sliding_active">
                                                    <a href="#prev" class="st_prev" style="display: inline;"></a>
                                                    <div class="st_slide_container">
                                                        <ul class="st_tabs" style="margin-left:0px">
                                                            <h:outputText escape="false"    rendered="#{loginSession.right.EMP_CON_VIEW}"
                                                                          value='
                                                                          <li   class="st_tab  tab1#{item.pn100}"
                                                                          id="#{item.pn100}"
                                                                          lang="contactInfoDetails.jsp">#{locale.contact_info}

                                                                          </li>
                                                                          '
                                                                          />
                                                            <h:outputText escape="false" rendered="#{loginSession.right.EMP_INF_VIEW}"
                                                                          value='
                                                                          <li  class="st_tab  tab2#{item.pn100}"
                                                                          id="#{item.pn100}"
                                                                          lang="jobInfoDetails.jsp">#{locale.job_info}<a></a></li>
                                                                          '
                                                                          />
                                                            <h:outputText escape="false"    rendered="#{loginSession.right.EMP_CMND_VIEW}"
                                                                          value='
                                                                          <li  class="st_tab tab3#{item.pn100}"
                                                                          id="#{item.pn100}"
                                                                          lang="personalInfoDetails.jsp">#{locale.person_info}<a  ></a></li>
                                                                          '
                                                                          />
                                                            <h:outputText escape="false"    rendered="#{loginSession.right.EMP_DOC_VIEW}"
                                                                          value='
                                                                          <li class="st_tab tab4#{item.pn100}"
                                                                          id="#{item.pn100}"
                                                                          lang="documentdetail.jsp">#{locale.document} <a></a> </li>
                                                                          '
                                                                          />
                                                            <h:outputText escape="false"    rendered="#{loginSession.right.EMP_ACC_VIEW}"
                                                                          value='
                                                                          <li class="st_tab tab5#{item.pn100}"
                                                                          id="#{item.pn100}"
                                                                          lang="accountDetail.jsp" itemid="N100" >#{locale.acount_info}<a></a> </li>
                                                                          '
                                                                          />


                                                        </ul>
                                                    </div> <!-- /.st_slide_container -->
                                                    <a style="display: inline;" href="#next" class="st_next st_btn_disabled"></a>
                                                </div> <!-- /.st_tabs_container -->
                                                <div class="item_description"></div>
                                            </div>
                                        </div>

                                        <!--
                                      <div style="display:none" class="item_detail">
                                          
                                      <ul class="item_tab tab1<h:outputText value='#{item.pn100}'/>" id="<h:outputText value="#{item.pn100}"/>" title="page" lang="contactInfoDetails.jsp">LIÊN HỆ</ul>
                                          <ul class="item_tab tab2<h:outputText value='#{item.pn100}'/>" id="<h:outputText value="#{item.pn100}"/>" lang="jobInfoDetails.jsp" >CÔNG VIỆC</ul>
                                          <ul class="item_tab tab3<h:outputText value='#{item.pn100}'/>" id="<h:outputText value="#{item.pn100}"/>" title="page" lang="personalInfoDetails.jsp" >CÁ NHÂN</ul>
                                          <div class="item_description">description
                                      </div> </div> -->
                                    </a4j:repeat>
                                </h:panelGroup  >
                                <div class="fotter-page">
                                    <jsp:include page="../../common/pagingEmployee.jsp"/>
                                </div>
                            </div>

                            <!-- End List Content-->    
                        </div>
                        <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                         height="30" width="40" zindex="2000">
                            <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                        </rich:modalPanel>
                    </div>

                </div>
            </div>

        </a4j:form>
    </body>
    <script type="text/javascript" src="../scripts/webcame/jquery.webcam.js"></script>
</html>
<style>
    #main{
        width:100%;
    }
    #content{
        padding:0px !important;
        width:100%;
    }
    #footer{
        width:100%;
    }
    .title_tour{
        width:100%;
    }

    #content_detail {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        width: 98.5%;
        padding-top: 7px !important;
    }


    #header_content {
        float: right;
        margin-top: 40px;
        width: 87%;
    }
    .webcame{
        background: url("../images/01.png") repeat scroll 0 0 transparent;
        height: 15px;
        width: 27px;
        float:left;
        margin-right:14px;

        cursor: pointer;
    }
    .webcame img{

    }
    .scapture{
        background: none repeat scroll 0 0 #39A3DD;
        height: 321px;
        margin-bottom: 4px;

        margin-top: 16px;
        padding-left: 0;
        position: absolute;
        width: 360px;
        z-index: 200;
        border-radius: 20px;
    }
    .scapture{
        visibility: hidden;

    }
    .fields_more{
        float:left;

        margin-top:44px !important;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .detail_more{
        float:left;
        /* margin-left:254px !important;*/
    }

    .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
    .buttonsearch2{
        border:0;
        background:url(../images/bg_submit.gif) repeat-x;
        width:68px;

        margin:0px 0 10px 20px;
        color:#ffffff;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        border-radius:2px;
        padding:4px 0;
        text-transform:uppercase;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .updateN900{
        color:#fff;
        text-align: left;
        margin-left:8px;
        cursor: pointer;
        width:95% !important;
    }
    input{
        float:left;
        margin-left:9px;
    }
    select{
        float:left;
        height: 21px;
        width:82px;
        margin-left:9px;
    }
    .departmentlistN850 ul li{
        background: url("../images/bg_button2.gif");

    }

    .departmentlistN850 ul li span{
        width:125px !important;

    }

    .department:hover .departmentlist{display: block !important;z-index: 999;}
    .feild_sex{
        height: 127px !important;
        margin-left: 5px;
        margin-top: 14px;
        padding: 15px;
        width: 195px;
    }
    .chose1 a{
        width:125px !important;
    }
    /*            .popup-content .main_content .form_item_content .edit_form_left .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }
                .popup-content .main_content .form_item_content .edit_form_right .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }*/
    .fields_input {
        float: left;

        width: 100%;
    }
    .buttonsaveS{
        background: url("../images/bg_submit.gif") repeat-x scroll 0 0 transparent;
        border: 0 none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 2px 3px #666666;
        color: #FFFFFF;
        cursor: pointer;
        float: right;
        font-size: 14px;
        font-weight: bold;
        margin: 19px 10px 10px;
        padding: 8px 0;
        text-transform: uppercase;
        width: 98px;
        text-align: center;
    }
    .sidebar .search_box .fields_submit input[type="submit"]{
        width: 98px !important;
    }
    .moreMail img{
        width: 22px;
        height: 22px;
    }
    .buttonExcel {
        background: url("../images/icon_excel.png") repeat-x scroll 0 0 transparent;
        border: 0 none;
        cursor: pointer;
        float: left;
        height: 22px;
        margin: 76px 8%;

        position: absolute;
        width: 24px;

    }
    .fields_edit img{
        height: 15px;
        width: 16px;
    }
    .deletepage img{
        height: 22px;
        width: 22px;
    }

    .sidebar_search {
        background: url("../images/searchTour.png") no-repeat scroll 100% 0 transparent;
        cursor: pointer;
        float: left;
        height: 43px;
        border: 0;
        line-height: 43px;
        margin-top: 0px;
        padding-right: 36px;
        text-align: left;
    }

    .sidebar_search span {

        color: #FFFFFF;
        float: left;
        font-size: 14px;
        height: 36px;
        padding-left: 18px;
        text-shadow: 2px 2px 3px #333333;
        text-transform: uppercase;
        width: 200px;
    }
    .sidebar_row1 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row2 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row1{
        width: 4%;
    }

    .sidebar_row2 {
        margin-bottom: 0px;
        width: 2%;
    }

    .sidebar_row2 .sidebar{
        margin-bottom: 0px;
        width: 100% !important;
    }
    .content_right .content .list_content .item .fields_info{
        width: 26% !important;
    }
    .content_right .content .list_content .item .fields_contact_emp{
        width:30% !important;
    }
    .sendSMS_person{
        color: #0055A6;;
        cursor: pointer;
    }
    #togglesms {
        background: none repeat scroll 0 0 #226579;
        float: left;
        right: 0px;
        margin-top: 100px;
        position: absolute;
        z-index: 999;
        border-radius: 3px;
        border: 1px solid #53B4BF;
    }
    .classimageSMS{
        float:left;
        margin-right: 5px;
    }
</style>